<script lang="ts">
// 物料信息
export default {
  name: "materialPage",
  components: { imgViewer }
};
</script>

<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from "vue";
import { changeHeight } from "/@/utils/public.mixin";
import { VxeFormPropTypes, VxeFormInstance } from "vxe-table";
import {
  addMaterial,
  updateMaterial,
  queryMaterialPageMater,
  exportMaterial
} from "/@/api/basic/material";
import { getWorkmanshipAll } from "/@/api/basic/workmanship";
import { getQualityAll } from "/@/api/quality/qualitytemplate";
import { useRoute } from "vue-router";
import { successMessage, errorMessage } from "/@/utils/message";
import { queryItemByCodes } from "/@/api/basic/dictionaries";
import imgViewer from "/@/components/imgViewer/index.vue";
import { loadEnv } from "@build/index";
import { getToken } from "/@/utils/auth";
// 加载环境变量 VITE_PROXY_DOMAIN（开发环境）  VITE_PROXY_DOMAIN_REAL（打包后的线上环境）
const { VITE_PROXY_DOMAIN, VITE_PROXY_DOMAIN_REAL } = loadEnv();
const actionUrl =
  process.env.NODE_ENV === "production"
    ? VITE_PROXY_DOMAIN_REAL
    : (VITE_PROXY_DOMAIN as string);

const getTo = getToken();
const token = JSON.parse(getTo).accessToken as string;
// 上传文件时的token
const myHeaders = reactive({
  Authorization: token
});
const xForm = ref({} as VxeFormInstance);
const route = useRoute();
const routeName = route.name as string;
const page = reactive({
  pageNum: 1,
  pageRow: 20,
  totalResult: 0
});
const table = reactive({
  loading: false,
  tableData: [] as any[],
  tableHeight: 0, //表格高度
  listQuery: {
    code: "",
    itemCategory: "",
    name: "",
    source: ""
  }
});
// 查询工艺路线-全部
const queryAllWorkmanship = async () => {
  getWorkmanshipAll().then((res: any) => {
    if (res.code === 0) {
      dialog.listData = res.data;
    }
  });
};
// 获取质检模板=检验规范
const getQuality = () => {
  getQualityAll().then((res: any) => {
    if (res.code === 0) {
      dialog.qualityData = res.data.list;
    }
  });
};
// 查询
const searchEvent = () => {
  const data: any = {};
  Object.assign(data, table.listQuery);
  data.pageNum = page.pageNum;
  data.pageRow = page.pageRow;
  table.loading = true;
  queryMaterialPageMater(data)
    .then((res: any) => {
      if (res.code === 0) {
        table.tableData = res.data.list;
        page.totalResult = res.data.total;
      }
      table.loading = false;
    })
    .catch(() => {
      errorMessage("查询失败");
      table.loading = false;
    });
};

// 分页发生改变时会触发该事件
const handlePageChange = ({ currentPage, pageSize }) => {
  page.pageNum = currentPage;
  page.pageRow = pageSize;
  searchEvent();
};
const dialog = reactive({
  qualityName: "",
  vserive: "",
  vseriveName: "",
  loading: false,
  submitLoading: false,
  selectRow: null,
  showEdit: false,
  showRoute: false,
  tableData: [] as any[],
  listData: [] as any[],
  weightData: [] as any[],
  lengthData: [] as any[],
  timeData: [] as any[], //时间单位
  fileList: [] as any[], //新增修改是上传文件的列表
  files: [] as any[], //修改时复显的列表
  qualityData: [] as any[], //质检模板=检验规范全部
  insertData: null,
  formData: {
    assistMeasureUnit: "",
    bomType: "",
    code: "",
    dailyCapacity: "" as any,
    deliveryState: "",
    figureNumber: "",
    fixNumber: "",
    fileList: [] as any[],
    id: 0,
    inspectionHours: "",
    itemCategory: "",
    leadTime: "",
    leadTimeUtil: "",
    longt: "",
    lengthUnit: "",
    measureUnit: "",
    modelAttributes: "",
    modelNumber: "",
    name: "",
    productLine: "",
    reviewHours: "",
    routeId: "",
    safeStock: "",
    source: "",
    specification: "",
    stock: "",
    texture: "",
    thickness: "",
    thicknessUnit: "",
    weight: "",
    weightUnit: "",
    width: "",
    widthUnit: "",
    workingHours: "",
    qualityId: "",
    bzjhgs: "",
    djjsgs: ""
  },
  formRules: {
    name: [{ required: true, message: "请输入物料名称" }],
    code: [{ required: true, message: "请输入物料编号" }]
    // qualityId: [{ required: true, message: "请选择检验规范" }]
    // routeId: [{ required: true, message: "请选择工艺路线" }],
    // workingHours: [{ required: true, message: "请输入数值" }],
    // fixNumber: [{ required: true, message: "请输入数值" }],
    // inspectionHours: [{ required: true, message: "请输入数值" }],
    // reviewHours: [{ required: true, message: "请输入数值" }],
    // bzjhgs: [{ required: true, message: "请输入数值" }],
    // djjsgs: [{ required: true, message: "请输入数值" }]
  } as VxeFormPropTypes.Rules
});

// 新增
const insertEvent = () => {
  dialog.formData = {
    assistMeasureUnit: "",
    bomType: "",
    code: "",
    deliveryState: "",
    dailyCapacity: "" as any,
    figureNumber: "",
    fixNumber: "",
    fileList: [] as any[],
    id: 0,
    inspectionHours: "",
    itemCategory: "",
    leadTime: "",
    leadTimeUtil: "",
    longt: "",
    lengthUnit: "",
    measureUnit: "",
    modelAttributes: "",
    modelNumber: "",
    name: "",
    productLine: "",
    reviewHours: "",
    routeId: "",
    safeStock: "",
    source: "",
    specification: "",
    stock: "",
    texture: "",
    thickness: "",
    thicknessUnit: "",
    weight: "",
    weightUnit: "",
    width: "",
    widthUnit: "",
    workingHours: "",
    qualityId: "",
    bzjhgs: "",
    djjsgs: ""
  };
  const data: any = {};
  data.pageNum = page.pageNum;
  data.pageRow = page.pageRow;
  // getQualityAll(data).then((res: any) => {
  //   if (res.code === 0) {
  //     dialog.qualityData = res.data;
  //     console.log(dialog.qualityData, "逻辑");
  //   }
  // });
  dialog.selectRow = null;
  dialog.showEdit = true;
};
// 修改
const editEvent = (row: any) => {
  Object.keys(dialog.formData).forEach(key => {
    dialog.formData[key] = row[key] ? row[key] : dialog.formData[key];
  });

  // console.log(dialog.formData);
  dialog.selectRow = row;
  dialog.showEdit = true;
};
// 表单提交
const submitEvent = async () => {
  dialog.insertData = new FormData();
  if (dialog.fileList.length) {
    for (const i in dialog.fileList) {
      dialog.insertData.append("files", dialog.fileList[i]); // 'file'可变相当于input表单的name属性
    }
  }
  const $form = xForm.value;
  const errMap = await $form.validate();
  if (!errMap) {
    dialog.submitLoading = true;
    for (const i in dialog.formData) {
      dialog.insertData.append(i, dialog.formData[i]);
    }
    if (dialog.selectRow) {
      // 修改
      updateMaterial(dialog.insertData)
        .then((res: any) => {
          if (res.code === 0) {
            successMessage("操作成功");
            handleClose();
            searchEvent();
          } else {
            errorMessage(res.message);
            dialog.submitLoading = false;
          }
        })
        .catch(() => {
          errorMessage("操作失败");
          dialog.submitLoading = false;
        });
    } else {
      // 新增
      addMaterial(dialog.insertData)
        .then((res: any) => {
          if (res.code === 0) {
            successMessage("操作成功");
            handleClose();
            searchEvent();
          } else {
            errorMessage(res.message);
            dialog.submitLoading = false;
          }
        })
        .catch(() => {
          errorMessage("操作失败");
          dialog.submitLoading = false;
        });
    }
  }
};
// 获取金额货币成本单位
const queryUnit = (code: any) => {
  queryItemByCodes([code]).then((res: any) => {
    if (code == "重量") {
      dialog.weightData = res;
    } else if (code == "时间") {
      dialog.timeData = res;
    } else {
      dialog.lengthData = res;
    }
  });
};
/** 文件状态改变时调用 */
const changeFile = event => {
  dialog.fileList = [];
  for (let i = 0; i < event.length; i++) {
    //ready为本次上传的图片，success为已经上传的图片
    if (event[i].status == "ready") {
      dialog.fileList.push(event[i].raw);
    }
  }
};

const handleClose = () => {
  nextTick(() => {
    dialog.formData = {
      assistMeasureUnit: "",
      bomType: "",
      code: "",
      dailyCapacity: "" as any,
      deliveryState: "",
      figureNumber: "",
      fixNumber: "",
      fileList: [] as any[],
      id: 0,
      inspectionHours: "",
      itemCategory: "",
      leadTime: "",
      leadTimeUtil: "",
      longt: "",
      lengthUnit: "",
      measureUnit: "",
      modelAttributes: "",
      modelNumber: "",
      name: "",
      productLine: "",
      reviewHours: "",
      routeId: "",
      safeStock: "",
      source: "",
      specification: "",
      stock: "",
      texture: "",
      thickness: "",
      thicknessUnit: "",
      weight: "",
      weightUnit: "",
      width: "",
      widthUnit: "",
      workingHours: "",
      qualityId: "",
      bzjhgs: "",
      djjsgs: ""
    };
    dialog.submitLoading = false;
    dialog.showEdit = false;
    dialog.showRoute = false;
    dialog.fileList = [];
  });
};
const upload = ref();
// 文件上传成功
const fileSuccess = data => {
  if (data.code === 0) {
    successMessage("上传成功");
    searchEvent();
  } else {
    errorMessage(data.message);
  }
  table.loading = false;
  upload.value.clearFiles();
  // successMessage("上传成功");
  // procedure.loading = false;
  // searchEvent();
};
// 文件上传失败
const fileError = () => {
  errorMessage("上传失败");
  table.loading = false;
};
// 文件上传前
const fileBefore = file => {
  const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
  const whiteList = ["xlsx", "xls"];
  if (whiteList.indexOf(fileSuffix) === -1) {
    errorMessage("传文件只能是xlsx,xls格式");
    return false;
  }
  table.loading = true;
};
// 导出数据
const exportProcess = () => {
  exportMaterial().then((res: any) => {
    if (res.code == 500) {
      errorMessage(res.message);
    } else {
      const fileBlob = res;
      const fileUrl = URL.createObjectURL(fileBlob); //将blob转成url地址
      const element = document.createElement("a");
      element.setAttribute("href", fileUrl);
      element.setAttribute("downLoad", "物料信息.xls");
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    }
  });
};
// mounted
onMounted(() => {
  nextTick(() => {
    // 将表格和工具栏进行关联
    searchEvent();
    queryAllWorkmanship();
    queryUnit("重量");
    queryUnit("长度");
    queryUnit("时间");
    getQuality();
    table.tableHeight = changeHeight();
  });
});
</script>

<template>
  <div>
    <!-- 工具栏 -->
    <vxe-form :data="table.listQuery">
      <vxe-form-item title="品名" field="name" :item-render="{}">
        <template #default="{ data }">
          <vxe-input v-model="data.name" placeholder="请输入品名"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="料号" field="code" :item-render="{}">
        <template #default="{ data }">
          <vxe-input v-model="data.code" placeholder="请输入料号"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="库存分类" field="itemCategory" :item-render="{}">
        <template #default="{ data }">
          <vxe-input
            v-model="data.itemCategory"
            placeholder="请输入库存分类"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button
            status="primary"
            icon="fa fa-search"
            v-auth="routeName + ':search'"
            @click="searchEvent"
            >查询</vxe-button
          >
          <vxe-button
            icon="fa fa-clone"
            v-auth="routeName + ':U9'"
            status="primary"
            >从U9同步</vxe-button
          >
          <vxe-button
            status="primary"
            icon="fa fa-plus"
            @click="insertEvent"
            v-auth="routeName + ':add'"
            >新增</vxe-button
          >
          <vxe-button
            @click="exportProcess"
            status="primary"
            icon="fa fa-download"
            v-auth="routeName + ':add'"
            >导出数据</vxe-button
          >
          <el-upload
            ref="upload"
            class="upload-file"
            :headers="myHeaders"
            :action="actionUrl + '/bom/upload'"
            v-auth="routeName + ':add'"
            :limit="1"
            :auto-upload="true"
            :show-file-list="false"
            :on-success="fileSuccess"
            :on-error="fileError"
            :before-upload="fileBefore"
            style="display: contents"
          >
            <vxe-button status="primary" icon="fa fa-upload"
              >上传文件</vxe-button
            >
          </el-upload>
        </template>
      </vxe-form-item>
    </vxe-form>
    <!-- 列表 -->
    <vxe-table
      ref="xTable"
      border
      resizable
      show-header-overflow
      show-overflow
      :row-config="{ isHover: true }"
      :print-config="{}"
      :export-config="{}"
      :height="table.tableHeight"
      :data="table.tableData"
      :loading="table.loading"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="code" title="料号" min-width="130"></vxe-column>
      <vxe-column field="name" title="品名" min-width="300"></vxe-column>
      <vxe-column
        field="figureNumber"
        title="别名"
        min-width="150"
      ></vxe-column>
      <vxe-column
        field="dailyCapacity"
        title="日产能(台/日)"
        min-width="120"
      ></vxe-column>
      <vxe-column field="modelNumber" title="机型" width="120"></vxe-column>
      <vxe-column field="bomType" title="财务分类" min-width="100"></vxe-column>
      <vxe-column
        field="itemCategory"
        title="库存分类"
        min-width="100"
      ></vxe-column>
      <vxe-column
        field="deliveryState"
        title="交货状态"
        min-width="100"
      ></vxe-column>
      <vxe-column
        field="modelAttributes"
        title="形态属性"
        min-width="100"
      ></vxe-column>
      <vxe-column field="customer" title="客户" min-width="200"></vxe-column>
      <vxe-column field="supplier" title="供应商" min-width="120"></vxe-column>
      <!-- <vxe-column field="productLine" title="产品系列" width="120"></vxe-column> -->
      <vxe-column field="measureUnit" title="计量单位" width="120"></vxe-column>
      <vxe-column
        field="assistMeasureUnit"
        title="辅计量单位"
        width="120"
      ></vxe-column>
      <vxe-column
        field="workingHours"
        title="标准加工工时(小时)"
        width="160"
      ></vxe-column>
      <vxe-column
        field="inspectionHours"
        title="标准检验工时(小时)"
        width="160"
      ></vxe-column>
      <vxe-column
        field="reviewHours"
        title="复审工时(小时)"
        width="140"
      ></vxe-column>
      <vxe-column
        field="bzjhgs"
        title="标准降耗工时(小时)"
        width="180"
      ></vxe-column>
      <vxe-column
        field="djjsgs"
        title="单件节省工时(小时)"
        width="180"
      ></vxe-column>
      <vxe-column field="qualityName" title="检验规范" width="260">
      </vxe-column>
      <!-- <vxe-column field="texture" title="材质" min-width="120"></vxe-column> -->
      <vxe-column field="longt" title="长度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.longt
          }}{{
            row.longt && row.lengthUnitCN ? "(" + row.lengthUnitCN + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="width" title="宽度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.width
          }}{{
            row.width && row.widthUnitCN ? "(" + row.widthUnitCN + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="thickness" title="厚度/高度(单位)" min-width="140">
        <template #default="{ row }">
          {{ row.thickness
          }}{{
            row.thickness && row.thicknessUnitCN
              ? "(" + row.thicknessUnitCN + ")"
              : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="specification" title="规格" width="120"></vxe-column>
      <vxe-column field="weight" title="成本(单位)" width="100">
        <template #default="{ row }">
          {{ row.weight
          }}{{
            row.weight && row.weightUnitCN ? "(" + row.weightUnitCN + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column
        field="processRouteName"
        title="工艺路线"
        width="150"
      ></vxe-column>
      <vxe-column field="leadTime" title="采购周期(单位)" width="120">
        <template #default="{ row }">
          {{ row.leadTime
          }}{{
            row.leadTime && row.leadTimeUtil ? "(" + row.leadTimeUtil + ")" : ""
          }}
        </template>
      </vxe-column>
      <!-- <vxe-column field="stock"
                  title="库存"
                  width="120"></vxe-column> -->
      <vxe-column field="fixNumber" title="定盘数" width="120"></vxe-column>
      <vxe-column title="操作" width="100" fixed="right">
        <template #default="{ row }">
          <vxe-button
            type="text"
            icon="fa fa-edit"
            @click="editEvent(row)"
            v-auth="routeName + ':edit'"
            >编辑</vxe-button
          >
          <!-- <vxe-button
            type="text"
            icon="fa fa-trash-o"
            v-auth="routeName + ':delete'"
            @click="deleteData(row.id)"
            >删除</vxe-button
          > -->
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <vxe-pager
      perfect
      @page-change="handlePageChange"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageRow"
      :total="page.totalResult"
      :page-sizes="[10, 20, 50, 100, 300]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total'
      ]"
    >
    </vxe-pager>

    <!-- 表单弹框 -->
    <vxe-modal
      v-if="dialog.showEdit"
      v-model="dialog.showEdit"
      :title="dialog.selectRow ? '编辑&保存' : '新增&保存'"
      width="500"
      min-width="500"
      min-height="600"
      height="600"
      :loading="dialog.submitLoading"
      resize
      showFooter
      destroy-on-close
      @close="handleClose"
    >
      <template #default>
        <vxe-form
          ref="xForm"
          :data="dialog.formData"
          :rules="dialog.formRules"
          title-align="right"
          title-width="160"
          :span="24"
        >
          <vxe-form-item field="name" title="品名">
            <template #default="{ data }">
              <vxe-input
                v-model="data.name"
                :clearable="false"
                :readonly="dialog.selectRow ? true : false"
                placeholder="请输入品名"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="code" title="料号">
            <template #default="{ data }">
              <vxe-input
                v-model="data.code"
                :clearable="false"
                :readonly="dialog.selectRow ? true : false"
                placeholder="请输入料号"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="dailyCapacity" title="日产能(台/日)">
            <template #default="{ data }">
              <el-input-number
                :min="0"
                size="small"
                style="width: 100%"
                v-model="data.dailyCapacity"
                placeholder="请输入日产能"
              ></el-input-number>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="figureNumber"
            title="别名"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.figureNumber"
                placeholder="请输入别名"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="bomType"
            title="物料类型"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <el-select
                v-model="data.bomType"
                filterable
                placeholder="请选择物料类型"
                size="small"
                style="width: 100%"
              >
                <el-option label="原料" :value="1">原料</el-option>
                <el-option label="半成品" :value="2">半成品</el-option>
                <el-option label="成品" :value="3">成品</el-option>
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="itemCategory"
            title="库存分类"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.itemCategory"
                placeholder="请输入库存分类"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="modelNumber"
            title="型号"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.modelNumber"
                placeholder="请输入型号"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <!-- <vxe-form-item
            field="productLine"
            title="产品系列"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.productLine"
                placeholder="请输入产品系列"
              ></vxe-input>
            </template>
          </vxe-form-item> -->
          <vxe-form-item
            field="measureUnit"
            title="计量单位"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.measureUnit"
                placeholder="请输入计量单位"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="assistMeasureUnit"
            title="辅计量单位"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.assistMeasureUnit"
                placeholder="请输入辅计量单位"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="workingHours" title="标准加工工时(小时)">
            <template #default="{ data }">
              <vxe-input
                v-model="data.workingHours"
                placeholder="请输入标准加工工时"
                type="float"
                min="0.01"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="inspectionHours" title="标准检验工时(小时)">
            <template #default="{ data }">
              <vxe-input
                v-model="data.inspectionHours"
                placeholder="请输入标准检验工时"
                type="float"
                min="0.01"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="reviewHours" title="复审工时(小时)">
            <template #default="{ data }">
              <vxe-input
                v-model="data.reviewHours"
                placeholder="请输入复审工时"
                type="float"
                min="0.01"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="bzjhgs" title="标准降耗工时(小时)">
            <template #default="{ data }">
              <vxe-input
                v-model="data.bzjhgs"
                placeholder="请输入标准降耗工时"
                type="float"
                min="0.01"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="djjsgs" title="单件节省工时(小时)">
            <template #default="{ data }">
              <vxe-input
                v-model="data.djjsgs"
                placeholder="请输入单件节省工时"
                type="float"
                min="0.01"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="fixNumber" title="定盘数">
            <template #default="{ data }">
              <vxe-input
                type="integer"
                v-model="data.fixNumber"
                placeholder="请输入定盘数"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="qualityId" title="检验规范">
            <template #default="{ data }">
              <el-select
                v-model="data.qualityId"
                filterable
                placeholder="请选择检验规范"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dialog.qualityData"
                  :key="item.id"
                  :label="item.name + '（' + item.version + '）'"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </vxe-form-item>
          <!-- <vxe-form-item field="texture" title="材质" v-if="!dialog.selectRow">
            <template #default="{ data }">
              <vxe-input
                v-model="data.texture"
                placeholder="请输入材质"
              ></vxe-input>
            </template>
          </vxe-form-item> -->
          <vxe-form-item field="longt" title="长度" v-if="!dialog.selectRow">
            <template #default="{ data }">
              <vxe-input
                v-model="data.longt"
                placeholder="请输入长度"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="lengthUnit"
            title="长度单位"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <el-select
                v-model="data.lengthUnit"
                filterable
                size="small"
                style="width: 100%"
                placeholder="请选择长度单位"
              >
                <el-option
                  v-for="item in dialog.lengthData"
                  :key="item.id"
                  :label="item.unitName"
                  :value="item.unitCode"
                >
                </el-option>
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="width" title="宽度" v-if="!dialog.selectRow">
            <template #default="{ data }">
              <vxe-input
                v-model="data.width"
                placeholder="请输入宽度"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="widthUnit"
            title="宽度单位"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <el-select
                v-model="data.widthUnit"
                filterable
                size="small"
                style="width: 100%"
                placeholder="请选择宽度单位"
              >
                <el-option
                  v-for="item in dialog.lengthData"
                  :key="item.id"
                  :label="item.unitName"
                  :value="item.unitCode"
                >
                </el-option>
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="thickness"
            title="厚度/高度"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.thickness"
                placeholder="请输入厚度/高度"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="thicknessUnit"
            title="厚度/高度单位"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <el-select
                v-model="data.thicknessUnit"
                filterable
                size="small"
                style="width: 100%"
                placeholder="请选择厚度/高度单位"
              >
                <el-option
                  v-for="item in dialog.lengthData"
                  :key="item.id"
                  :label="item.unitName"
                  :value="item.unitCode"
                >
                </el-option>
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="weight" title="成本" v-if="!dialog.selectRow">
            <template #default="{ data }">
              <vxe-input
                v-model="data.weight"
                placeholder="请输入成本"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="weightUnit"
            title="成本单位"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <el-select
                v-model="data.weightUnit"
                filterable
                size="small"
                style="width: 100%"
                placeholder="请选择成本单位"
              >
                <el-option
                  v-for="item in dialog.weightData"
                  :key="item.id"
                  :label="item.unitName"
                  :value="item.unitCode"
                >
                </el-option>
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="specification"
            title="规格"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.specification"
                placeholder="请输入规格"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="routeId" title="工艺路线">
            <template #default="{ data }">
              <el-select
                v-model="data.routeId"
                filterable
                placeholder="请选择工艺路线"
                size="small"
                style="width: 100%"
              >
                <!--  + '（' + item.version + '）' -->
                <el-option
                  v-for="item in dialog.listData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="leadTime"
            title="采购周期"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <vxe-input
                type="integer"
                v-model="data.leadTime"
                placeholder="请输入采购周期"
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="leadTimeUtil"
            title="采购周期单位"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <el-select
                v-model="data.leadTimeUtil"
                filterable
                size="small"
                style="width: 100%"
                placeholder="请选择采购周期单位"
              >
                <el-option
                  v-for="item in dialog.timeData"
                  :key="item.id"
                  :label="item.unitName"
                  :value="item.unitCode"
                >
                </el-option>
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="deliveryState"
            title="交货状态"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <el-input
                style="width: 100%"
                size="small"
                v-model="data.deliveryState"
                placeholder="请输入交货状态"
              ></el-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="modelAttributes"
            title="形态属性"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <el-input
                style="width: 100%"
                size="small"
                v-model="data.modelAttributes"
                placeholder="请输入形态属性"
              ></el-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="bomType"
            title="财务分类"
            v-if="!dialog.selectRow"
          >
            <template #default="{ data }">
              <el-input
                style="width: 100%"
                size="small"
                v-model="data.bomType"
                placeholder="请输入财务分类"
              ></el-input>
            </template>
          </vxe-form-item>

          <!-- <vxe-form-item>
            <template #default="{ data }">
              <transition-group
                class="upload-file-list el-upload-list el-upload-list--text"
                name="el-fade-in-linear"
                tag="ul"
              >
                <li
                  :key="file.uid"
                  class="el-upload-list__item ele-upload-list__item-content"
                  v-for="(file, index) in data.fileList"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="file.fileurl"
                  ></el-image>
                  <span class="el-icon-document">{{ file.filename }} </span>
                  <el-icon
                    @click="fileDeletes(index)"
                    style="
                      position: absolute;
                      margin-top: 5px;
                      margin-left: 5px;
                    "
                  >
                    <delete />
                  </el-icon>
                </li>
              </transition-group>
            </template>
          </vxe-form-item>
          <vxe-form-item>
            <vxe-button status="primary" @click="choiceImg" size="mini">
              选择文件
              <input
                ref="deviceList"
                type="file"
                class="upload-file"
                @change="handChange($event)"
                multiple
              />
            </vxe-button>
            <transition-group
              class="upload-file-list el-upload-list el-upload-list--text"
              name="el-fade-in-linear"
              tag="ul"
            >
              <li
                :key="file.uid"
                class="el-upload-list__item ele-upload-list__item-content"
                v-for="(file, index) in dialog.fileList"
              >
                <span class="el-icon-document">{{ file.name }} </span>
                <el-icon
                  @click="handleDelete(index)"
                  style="margin-top: 5px; margin-left: 5px"
                >
                  <delete />
                </el-icon>
              </li>
            </transition-group>
          </vxe-form-item> -->
        </vxe-form>
        <img-viewer
          :list="dialog.formData.fileList"
          @onChange="changeFile"
          @fileDeletes="searchEvent"
        ></img-viewer>
      </template>
      <template #footer>
        <vxe-button @click="handleClose">取 消</vxe-button>
        <vxe-button status="primary" @click="submitEvent">确 定</vxe-button>
      </template>
    </vxe-modal>
  </div>
</template>
<style>
.keyword-lighten {
  color: #000;
  background-color: #ffff00;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

// .vxe-button.type--button:not(.is--round) {
//   border-radius: 0;
// }

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
// .el-upload-list__item:first-child {
//   margin: 0;
// }
// .el-upload-list__item {
//   width: 120px;
//   height: 120px;
//   padding: 10px;
//   margin-right: 10px;
//   margin-bottom: 10px;
//   float: left;
//   border: 1px dotted rgb(54, 54, 54);
// }
</style>
